<template>
  <div class="box">
    <!-- <div class="header">
      <div class="title">问卷标题</div>
      <div class="creator">创建人：一个人</div>
    </div> -->
    <div class="footer">
      <div class="boxtwo">
        <div class="qs">
          <div class="mark">
            <img
              src="@/assets/images/mark.png"
              alt=""
              width="20px"
              height="20px"
            />
          </div>
          <div class="h1"><h1>请输入题目：</h1></div>
          <div class="ipt"><input type="text" /></div>
        </div>
        <!-- <div class="add" @click="add">
          <img
            src="@/assets/images/+.png"
            alt="添加"
            @click="add"
            width="36px"
            height="36px"
          />
        </div> -->
      </div>
      <!-- <div class="opts">
        <div class="opt">
          <div class="op">
            <div class="mark">
              <img
                src="@/assets/images/mark.png"
                alt=""
                width="20px"
                height="20px"
              />
            </div>
            <div class="ip"><h4>选项1:</h4></div>
            <div class="ipt"><input type="text" /></div>
          </div>
          <br />
          <div class="op">
            <div class="mark">
              <img
                src="@/assets/images/mark.png"
                alt=""
                width="20px"
                height="20px"
              />
            </div>
            <div class="ip"><h4>选项2:</h4></div>
            <div class="ipt"><input type="text" /></div>
          </div>
          <div class="op">
            <div class="mark">
              <img
                src="@/assets/images/mark.png"
                alt=""
                width="20px"
                height="20px"
              />
            </div>
            <div class="ip"><h4>选项3:</h4></div>
            <div class="ipt"><input type="text" /></div>
          </div>
        </div>
        <div class="add" @click="add">
          <img
            src="@/assets/images/+.png"
            alt="添加"
            @click="add"
            width="36px"
            height="36px"
          />
        </div>
      </div>
      <hr /> -->
      <div class="btn"><button class="ok">确定</button></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
/* .add {
  float: left;
  height: auto;
  width: auto;
  img {
    margin: 0 auto;
    display: block;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    border-radius: 0;
    &:hover {
      transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
    }
  }
}
.mark {
  float: left;
  height: auto;
  img {
    margin-top: 16px;
    margin-left: 6px;
  }
}

.footer {
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
  width: 1230px;
  height: auto;
  background: white;
  .boxtwo {
    height: 80px;
    margin: 0 auto;
    .qs {
      float: left;
      margin-top: 5px;
      margin: 0 auto;
      width: auto;
      height: 42px;
      .mark {
        float: left;
        height: auto;
        img {
          margin-top: 16px;
          margin-left: 6px;
        }
      }
      .ipt {
        float: left;
        margin-top: 6px;
        margin-left: 26px;
        width: 240px;
        height: 40px;
        line-height: 20px;
        border-radius: 5px;
        background-color: rgba(243, 244, 246, 100);
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid rgba(187, 187, 187, 100);
      }
      .h1 {
        margin-top: 6px;
        margin-left: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        float: left;
        width: 168px;
        height: 40px;
        color: rgba(24, 32, 56, 100);
        font-size: 28px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
      }
    }
    .add {
      float: left;
      padding: 10px;
    }
  }

  //   .opts {
  //     width: 1230px;
  //     margin: 0 auto;
  //     height: auto;
  //     float: left;
  //     .opt {
  //       float: left;
  //       width: 450px;

  //       .op {
  //         float: left;
  //         margin-left: 30px;
  //         height: 40px;

  //         .ip {
  //           margin-top: 5.5px;
  //           float: left;
  //           display: flex;
  //           justify-content: center;
  //           align-items: center;
  //           width: 71px;
  //           height: 29px;
  //           color: rgba(24, 32, 56, 100);
  //           font-size: 20px;
  //           text-align: left;
  //           font-family: SourceHanSansSC-regular;
  //         }
  //         .ipt {
  //           margin-top: 5px;
  //           float: left;
  //           width: 200px;
  //           height: 30px;
  //           line-height: 20px;
  //           border-radius: 5px;
  //           background-color: rgba(243, 244, 246, 100);
  //           text-align: center;
  //           border: 1px solid rgba(187, 187, 187, 100);
  //         }
  //       }
  //     }
  //     .add {
  //       float: left;
  //       height: auto;
  //       width: auto;
  //       img {
  //         margin: 0 auto;
  //         display: block;
  //         transition: all 0.2s ease-in-out;
  //         -webkit-transition: all 0.2s ease-in-out;
  //         -moz-transition: all 0.2s ease-in-out;
  //         -o-transition: all 0.2s ease-in-out;
  //         border-radius: 0;
  //         &:hover {
  //           transform: rotate(180deg);
  //           -webkit-transform: rotate(180deg);
  //           -moz-transform: rotate(180deg);
  //           -o-transform: rotate(180deg);
  //           -ms-transform: rotate(180deg);
  //         }
  //       }
  //     }
  //   }

  .btn {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    .ok {
      width: 200px;
      height: 30px;
      border-radius: 4px;
      background-color: rgba(255, 227, 0, 100);
      color: rgba(255, 255, 255, 100);
      font-size: 16px;
      text-align: center;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
      font-family: Microsoft Yahei;
    }
  }
} */

.footer {
    background: #fff;
    padding: 2vw;
        border-bottom: 1px solid #bbb;

    .qs {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      margin-top: 3vh;
      margin-bottom: 3vh;
      margin-left:5vw;
      padding-bottom: 3vh;
      border-bottom: 1px solid #bbb;
      .h1 {
        h1 {
          font-size: 15px;
          font-weight: 500;
        }
      }
      .mark,
      .title,
      .ipt {
        display: inline-block;
      }
     
    }
    .btn {
          margin-top: 3vh;
          margin-left:5vw;
          .ok {
            display: inline-block;
            width: 200px;
            height: 30px;
            border-radius: 4px;
            background-color: rgba(255, 227, 0, 100);
            color: rgba(255, 255, 255, 100);
            font-size: 16px;
            text-align: center;
            box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
          }

        }
  }
  


</style>    